<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {include file="public/head"}
    <style>
        #addUserDiv{
            margin: 20px 50px 10px 0;
            display: none;
        }
        #editUserDiv{
            margin: 20px 50px 10px 0;
            display: none;
        }
    </style>
</head>
<body>

<div class="box">
    <button class="layui-btn" id="addUser">添加用户</button>
<table class="layui-table">
    <colgroup>
        <col width="150">
        <col width="150">
        <col width="200">
        <col width="150">
        <col width="150">
    </colgroup>
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>添加时间</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="tbody">

    </tbody>
</table>
    <div  class="page" id="page"></div>
</div>
</body>
<div id="addUserDiv">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name"  required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 20px">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addUser">提交</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">取消</button>
            </div>
        </div>
    </form>
</div>

<div id="editUserDiv">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" id="edit_name" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 20px">
            <div class="layui-input-block">
                <input type="hidden" id="edit_id" name="id">
                <button class="layui-btn" lay-submit lay-filter="editUser">提交</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">取消</button>
            </div>
        </div>
    </form>
</div>
<script>
    var form,layer,laypage;

        layui.use(['table','form','layer','laypage'], function(){
        form = layui.form;
        layer=layui.layer;
        laypage= layui.laypage;

        $.ajax({
            type:'POST',
            url:'/admin/user/all_user_list',
            success:function(data){
                if(data.code === 0){
                    dataRender(data.data);
                    laypage.render({
                        elem: 'page'
                        ,count: data.count
                        ,jump: function(obj, first){
                            if(!first){
                                $.ajax({
                                    type:'POST',
                                    url:'/admin/api/api_data',
                                    data:{page:obj.curr,limit:obj.limit},
                                    success:function(data){
                                        if(data.code === 0){
                                            dataRender(data.data);
                                        }else{
                                            layer.msg('暂无数据', {icon: 5});
                                        }
                                        return false;
                                    }
                                });
                            }
                        }
                    });
                }else{
                    layer.msg('暂无数据', {icon: 5});
                }
                return false;
            }
        });


        //数据渲染
        function dataRender(data){
            let html = '';
            data.forEach(function(item,index){
                html += dataRenderLine(item);
            });
            $("#tbody").html(html);
        }

        //单行渲染
        function dataRenderLine(item){
            let statusBut = item.status === 1 ? '<button class="layui-btn layui-btn-sm" data-id="'+item.id+'" data-status="0" data-title="禁用" onclick="editStatus(this)"><i class="layui-icon">&#xe651;</i></button>' : '<button class="layui-btn layui-btn-sm" data-id="'+item.id+'" data-status="1" data-title="启用" onclick="editStatus(this)"><i class="layui-icon">&#xe652;</i></button>';

            return  '<tr id="tr_'+item.id+'"><td>'+item.id+'</td><td id="name_'+item.id+'">'+item.name+'</td><td>'+item.create_time+'</td><td>'+item.statusMsg+'</td><td><button class="layui-btn layui-btn-sm" data-id="'+item.id+'" data-name="'+item.name+'" onclick="edit(this)"><i class="layui-icon">&#xe642;</i></button>'+statusBut+'<button class="layui-btn layui-btn-sm" data-id="'+item.id+'" data-name="'+item.name+'" onclick="del(this)"><i class="layui-icon">&#xe640;</i></button></td></tr>';
        }


        form.on('submit(addUser)', function(data){
            $.ajax({
                type:'POST',
                url:'/admin/user/user_add',
                data:data.field,
                success:function(data){
                    console.log(data);
                    if(data.code === 0){
                        layer.msg('操作成功', {
                            icon: 1,
                            time:2000
                        },function(){
                            layer.closeAll();
                            let line = dataRenderLine(data.data);
                            $("#tbody").append(line);
                        });
                    }else{
                        layer.msg(data.msg, {icon: 5});
                    }
                    return false;
                }
            });
            return false;
        });

            form.on('submit(editUser)', function(data){
                let field = data.field;
                $.ajax({
                    type:'POST',
                    url:'/admin/user/user_edit',
                    data:field,
                    success:function(data){
                        console.log(data);
                        if(data.code === 0){
                            layer.msg('操作成功', {
                                icon: 1,
                                time:2000
                            },function(){
                                layer.closeAll();
                                $("#name_"+field.id).html(field.name);
                            });
                        }else{
                            layer.msg(data.msg, {icon: 5});
                        }
                        return false;
                    }
                });
                return false;
            });

    });

        $("#addUser").click(function(){
            layer.open({
                type: 1,
                title:'添加用户',
                area: ['400px', '190px'],
                content: $('#addUserDiv')
            });
        });

    function editStatus(self)
    {
        let id = $(self).data("id");
        let status = $(self).data("status");
        let title = $(self).data("title");
        layer.confirm('确定要'+title+'吗？', {
            btn: ['确定','取消']
        }, function(){
            $.ajax({
                type:'POST',
                url:'/admin/user/user_status_edit_do',
                data:{id:id,status:status},
                success:function(data){
                    if(data.code === 0){
                        layer.msg('操作成功', {
                            icon: 1,
                            time:2000
                        },function(){
                            let statusBut = status === 1 ? '<button class="layui-btn layui-btn-sm" data-id="'+id+'" data-status="0" data-title="禁用" onclick="editStatus(this)"><i class="layui-icon">&#xe651;</i></button>' : '<button class="layui-btn layui-btn-sm" data-id="'+id+'" data-status="1" data-title="启用" onclick="editStatus(this)"><i class="layui-icon">&#xe652;</i></button>';
                            $(self).parent().prev().html(title);
                            $(self).before(statusBut).remove();
                            layer.closeAll();
                        });
                    }else{
                        layer.msg(data.msg,{icon:5});
                    }
                    return false;
                }
            });
        }, function(){
            layer.closeAll();
        });
    }

    function edit(self)
    {
        let action = $(self);
        let id = action.data("id");
        let name = action.data("name");
        $("#edit_id").val(id);
        $("#edit_name").val(name);
        layer.open({
            type: 1,
            title:'编辑用户',
            area: ['400px', '190px'],
            content: $('#editUserDiv')
        });
    }

    function del(self)
    {
        let id = $(self).data("id");
        let name = $(self).data("name");
        layer.confirm('确定要删除'+name+'吗？', {
            btn: ['确定','取消']
        }, function(){
            $.ajax({
                type:'POST',
                url:'/admin/user/user_del',
                data:{id:id},
                success:function(data){
                    if(data.code === 0){
                        layer.msg('操作成功', {
                            icon: 1,
                            time:2000
                        },function(){
                            let statusBut = status === 1 ? '<button class="layui-btn layui-btn-sm" data-id="'+id+'" data-status="0" data-title="禁用" onclick="editStatus(this)"><i class="layui-icon">&#xe651;</i></button>' : '<button class="layui-btn layui-btn-sm" data-id="'+id+'" data-status="1" data-title="启用" onclick="editStatus(this)"><i class="layui-icon">&#xe652;</i></button>';
                            $(self).parent().prev().html(title);
                            $(self).before(statusBut).remove();
                            layer.closeAll();
                        });
                    }else{
                        layer.msg(data.msg,{icon:5});
                    }
                    return false;
                }
            });
        }, function(){
            layer.closeAll();
        });
    }
</script>

</html>